<html>

<head>

<link type="text/css" rel="stylesheet" href="splash/splash.css"/>

</head>


	<body onload="initialize()" onunload="GUnload()">
		<div id="wrap">
			<div id="banner">
				<div id="logo"><img src="travel/logo.png"/></div>
				<div id="subtitle">Amir Ghazvinian, Letitia Lew, Nate Hardison, Nina Chen, Jonathan Nation</div>
			</div>
			<div id="main">
				<h1>See for yourself!</h1>
				<p>Check out a <a href="http://hardon.stanford.edu/travel/index.php?trip_id=1">live version of the webpage here</a>!</p>
				<br/>
				<h1>Motivation</h1>
				<p>To create a way for people to more richly record and share their travel experiences.
					<br/>Our application lets people contextualize their photos with sound clips and share them instantly.
				</p>
				<br/>
				<h1>App Summary</h1>
				<p>TravelHard is made up of two main parts:
				<ol>
					<li>Android app (the capture phase)
					<li>Website (the presentation phase)
				</ol>
				</p>
				<h2>Android app (capture phase)</h2>
				<div id="tab">
					Purpose
						<ul><li>To <span id="highlight">capture and publish</span> new media</ul>
					Users can
					<ul>
						<li><span id="highlight">Capture</span> new pictures
						<li><span id="highlight">Record</span> audio annotations
						<li><span id="highlight">View/edit</span> existing media
						<li><span id="highlight">Publish</span> new media to the web
					</ul>
					App automatically saves
					<ul>
						<li>GPS location
						<li>Time and date captured
					</ul>
				</div>
				<h2>Website (presentation phase)</h2>
				<div id="tab">
					Purpose
					<ul><li>To <span id="highlight">automatically</span> create a rich media</ul>
					Users can
					<ul>
						<li><span id="highlight">Share</span> easily with friends
						<li><span id="highlight">Browse</span> pictures
						<li><span id="highlight">Listen</span> to audio annotations
						<li><span id="highlight">Follow</span> the journey through time and locations
					</ul>
				</div>
				<br/>
				<h1>Design Process</h1>
				<h2>Brainstorming</h2>
				<img src="splash/IMG_3344.JPG" alt="brainstorming with post-it notes"/>
				<p>Brainstorming sessions involve lots of Post-it notes.</p>
				<br/>
				<img src="splash/IMG_0080.jpg" alt="initial poster presentation"/>
				<p>Coming up with app details after deciding that we want to do a travel application.</p>
				<h2>Paper Prototyping</h2>
				<img src="splash/paperProt1.PNG" alt="paper prototype 1"/>
				<p>Version 1 of the website, which focused on including lots of media types.</p>
				<br/>
				<img src="splash/paperProt2.PNG" alt="paper prototype 2"/>
				<p>Version 2 of the website, which included contextual information from other sources, like Wikipedia.</p>
				<h2>User Testing</h2>
				<img src="splash/IMG_5287.JPG" alt="user testing with Sarah"/>
				<p>Sarah tests the beta prototype of TravelHard.</p>
				<h2>Insights Gained</h2>
				<div>
					<ul>
					<li>Friends and family at home love being able to follow the traveler's journey in real-time.
					<li>Manually uploading photos and adding captions is tedious and time-consuming
					<li>Users are more interested in media they generate themselves (like photo annotations), as opposed to third party sources (like related Wikipedia articles).
					</ul>
				</div>
				<br/>
				<h1>Code repository and wiki</h1>
				<p>Check out our open-source code and wiki pages on <a href="http://code.google.com/p/travelhard/">our Google Code page</a>.</p>
				<br/>
			</div>
			<div id="sidebar">
			<iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/RKUTVBzRagU" frameborder="0" allowfullscreen></iframe>
			<p>Video overview of the app</p>
			<img src="splash/app_flow1.png" alt="android app flow"/>
			<p>Basic app flow</p>
			</br>
			<img src="splash/app_flow2.png" alt="android app flow"/>
			<p>View trips on the <a href="http://hardon.stanford.edu/travel/index.php?trip_id=1">website</a> (automatically generated)!</p>
			<br/>
			<img src="splash/app_flow3.png" alt="android app flow"/>
			<p>View picture details like time and location taken</p>
			</div>
		</div>
	
	</body>








</html>